<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			/*线性渐变-从上到下*/
			.p1{
				background-image: linear-gradient(#e66465, #9198e5);
			}
			/*线性渐变-从左到右*/
			.p2{
				background-image: linear-gradient(to right,red,yellow);
			}
			/*线性渐变-对角*/
			.p3{
				background-image: linear-gradient(to bottom right, red, yellow);
			}
			/*带有指定的角度的线性渐变*/
			.p4{
				background-image: linear-gradient(-90deg,red,yellow);
			}
			/*带有多个颜色节点的从上到下的线性渐变*/
			.p5{
				background-image: linear-gradient(red,blue,yellow);
			}
			/*使用透明度（transparent）*/
			.p6{
				background-image: linear-gradient(to right, rgba(255,0,0,0),rgba(255,0,0,1));
			}
			/*重复的线性渐变*/
			.p7{
				background-image: repeating-linear-gradient(red,yellow 10%,green 20%);
			}
			/*径向渐变 - 颜色节点均匀分布（默认情况下）*/
			.p8{
				background-image: radial-gradient(red,yellow,green);
			}
			/*径向渐变 - 颜色节点不均匀分布*/
			.p9{
				background-image: radial-gradient(red 5%,yellow 15%,green 60%);
			}
			/*设置形状*/
			.p10{
				background-image: radial-gradient(circle,red,yellow,green);
			}
			/*不同尺寸大小关键词的使用*/
			.p11{
				background-image: radial-gradient(closest-side at 60% 55%,red,yellow,green);
			}
		</style>
	</head>
	<body>
		<!--CSS3 线性渐变-从上到下-->
		<div class="p1"></div>
		<!--CSS3 线性渐变-从左到右-->
		<div class="p2"></div>
		<!--线性渐变 - 对角-->
		<div class="p3"></div>
		<!--带有指定的角度的线性渐变-->
		<div class="p4"></div>
		<!--带有多个颜色节点的从上到下的线性渐变-->
		<div class="p5"></div>
		<!--使用透明度（transparent）-->
		<div class="p6"></div>
		<!--重复的线性渐变-->
		<div class="p7"></div>
		<!--径向渐变 - 颜色节点均匀分布（默认情况下）-->
		<div class="p8"></div>
		<!--径向渐变 - 颜色节点不均匀分布-->
		<div class="p9"></div>
		<!--设置形状-->
		<div class="p10"></div>
		<!--不同尺寸大小关键词的使用-->
		<div class="p11"></div>
	</body>
</html>